<template>
  <div class="pagination">
    <!--
        每页显示  5 个页码
        1.  当 总页数 少于等于 5页, 则 直接输出 1 ~ pages 页码
        2.  当 总页数 大于 5页, 当前页 <= (5+1) / 2 页,  则 直接输出 1 ~ 5 页码
        3.  当 总页数 大于 5页， 当前页 >= (pages - 5/2), 则 直接输出 最后 5 页码
        4.  其它 情况 输出   当前页 前 (10 -1)/2 页 , 后 10/2 页
    -->
    <template v-if="pages <= 1"></template>
    <template v-else-if="pages <= showPageSize">
      <a v-for="p in pages" :class="{active: p === page}"
         :key="p" @click="page = p">{{ p }}</a>
      <template v-if="forceEllipses && pages > showPageSize">
        <b>···</b>
        <a>{{ pages }}</a>
      </template>
    </template>

    <template v-else-if="page <= toInt((showPageSize +1) / 2)">
      <a v-for="p in showPageSize" :class="{active: p === page}"
         :key="p" @click="page = p">{{ p }}</a>
      <template v-if="forceEllipses">
        <b>···</b>
        <a :class="{active: page===pages}" @click="page = pages">{{ pages }}</a>
      </template>
    </template>

    <template v-else-if="page >= pages - toInt(showPageSize / 2)">
      <template v-if="forceEllipses">
        <a :class="{active: page===1}" @click="page = 1">1</a>
        <b>···</b>
      </template>
      <a v-for="p in showPageSize"
         :class="{active: pages - showPageSize + p === page}"
         @click="page = pages - showPageSize + p">{{ pages - showPageSize + p }}</a>
    </template>

    <template v-else>
      <template v-if="forceEllipses">
        <a :class="{active: page===1}" @click="page = 1">1</a>
        <b>···</b>
      </template>
      <a v-for="p in showPageSize"
         :class="{active: page - toInt((showPageSize - 1)/2 )  - 1 + p === page}"
         @click="page = page - toInt((showPageSize - 1)/2 )  - 1 + p">{{
          page - toInt((showPageSize - 1) / 2) - 1 + p
        }}</a>
      <template v-if="forceEllipses">
        <b>···</b>
        <a :class="{active: page===pages}" @click="page = pages">{{ pages }}</a>
      </template>
    </template>

    <span>当前第<b>{{ page }}</b>页，共<b>{{ pages }}</b>页，{{ totalItems }}条数据</span>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Number,
      required: false,
      default: 1
    },
    totalItems: { //总条数
      type: Number,
      required: false,
      default: 0,
    },
    itemsPerPage: { // 每页显示条数
      type: Number,
      required: false,
      default: 10,
    },
    showPageSize: { // 显示多少个页码
      type: Number,
      required: false,
      default: 5,
    },
    forceEllipses: { // 是否显示省略号
      type: Boolean,
      required: false,
      default: false,
    }
  },
  emits: ["update:model-value", "page-click"],
  data() {
    return {
      page: this.modelValue,
    }
  },
  computed: {
    pages() { // 总页数
      return Math.floor((this.totalItems - 1) / this.itemsPerPage) + 1;
    }
  },
  methods: {
    toInt(num) { // 向下取整
      return Math.floor(num);
    }
  },
  watch: {
    page: function (p) {
      this.$emit("update:model-value", p);
      this.$emit("page-click", p);
    },
    modelValue: function (p) {
      this.page = p;
    }
  }
}
</script>

<style scoped>

.pagination {
  padding: 0 5px;
  user-select: none;
}

.pagination b {
  line-height: 30px;
}

.pagination a, .pagination span {
  padding: 7px 12px;
  border-radius: 5px;
  color: #000;
  font-size: 12px;
  margin: 0 1px;
}

.pagination a:hover, .pagination a.active {
  background-color: #e8e8e8;
}

.pagination a.disable {
  background: rgba(91, 98, 112, 0.06);
}

.pagination span b {
  margin: 0 2px;
}

</style>

<style>
.ivu-table-footer > div {
  max-width: 1000px !important;
}
</style>